<template>
  <el-card>
    <div class="Carbaoxian">
      <el-form
        :model="input"
        :inline="true"
        ref="addCar"
        style="height: 35px"
        label-width="100px"
      >
        <el-form-item label="车牌号码:">
          <el-select v-model="input.carId" placeholder="请选择车牌号">
            <el-option
              v-for="item in carNumberstyle"
              :key="item.id"
              :label="item.carNumber"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            @click="search()"
            class="detail"
            >搜索</el-button
          ></el-form-item
        >
        <el-form-item
          ><el-button
            type="primary"
            icon="el-icon-refresh"
            @click="clear"
            class="rePassword"
            >重置</el-button
          ></el-form-item
        >
        <el-form-item
          ><el-button
            @click="addFormVisible = true"
            type="primary"
            icon="el-icon-plus"
            class="addUser"
            >新增车辆保险</el-button
          ></el-form-item
        >
      </el-form>

      <div class="content" style="padding-top: 20px">
        <el-tag style="width: 100%"
          >已经选择{{ count }}项 &nbsp;&nbsp;
          <a href="" style="text-decoration: none" @click="clearBoth"
            >清空</a
          ></el-tag
        >
        <!-- 选择表格 -->
        <el-table
          ref="multipleTable"
          :data="tableDate"
          tooltip-effect="dark"
          style="width: 100%"
          border
          stripe
          @selection-change="handleSelectionChange"
          :row-style="{ height: '60px' }"
        >
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column
            prop="carNumber"
            label="车牌号码"
            width="180"
          ></el-table-column>
          <el-table-column prop="insuranceCom" label="保险公司" width="200">
          </el-table-column>
          <el-table-column prop="insuranceNum" label="商业险保单号" width="200">
          </el-table-column>
          <el-table-column prop="name" label="商业险起始日期">
            <template slot-scope="scope">{{
              scope.row.insuranceStartDate + '至' + scope.row.insuranceEndDate
            }}</template>
          </el-table-column>
          <el-table-column
            prop="trafficInsuranceNum"
            label="交强险保单号"
            width="200"
          >
          </el-table-column>
          <el-table-column prop="name" label="交强险起始日期" width="330">
            <template slot-scope="scope">{{
              scope.row.trafficInsuranceStartDate +
                '至' +
                scope.row.trafficInsuranceEndDate
            }}</template>
          </el-table-column>
          <el-table-column
            prop="address"
            label="操作"
            width="200"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <el-button
                @click.native.prevent="del(scope.row.id)"
                size="mini"
                class="rePassword"
                >删除</el-button
              >
              <el-button
                size="mini"
                @click="Edit(scope.row, scope.row.id)"
                class="addUser"
                >修改</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 修改框 -->
        <el-dialog title="车辆保险信息" :visible.sync="dialogFormVisible">
          <!--  在el-dialog中进行嵌套el-form实现弹出表格的效果  -->
          <el-form :model="form" :inline="true">
            <el-form-item label="车牌号码" style="width: 100%">
              <el-input
                v-model="form.carNumber"
                auto-complete="off"
                :disabled="true"
              ></el-input>
            </el-form-item>
            <el-form-item label="保险公司" style="width: 100%">
              <el-input
                v-model="form.insuranceCom"
                auto-complete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="商业险保单号" style="width: 100%">
              <el-input
                v-model="form.insuranceNum"
                auto-complete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="商业险开始日期" style="width: 40%">
              <el-date-picker
                v-model="form.insuranceStartDate"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="商业险结束日期" style="width: 40%">
              <el-date-picker
                v-model="form.insuranceEndDate"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="交强险保单号" style="width: 100%">
              <el-input
                v-model="form.trafficInsuranceNum"
                auto-complete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="交强险开始日期 " style="width: 40%">
              <el-date-picker
                v-model="form.trafficInsuranceStartDate"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="交强险结束日期" style="width: 40%">
              <el-date-picker
                v-model="form.trafficInsuranceEndDate"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
              >
              </el-date-picker>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <!-- 设置触发更新的方法  -->
            <el-button type="primary" @click="changeupdate()">确 定</el-button>
          </div>
        </el-dialog>
        <!-- 新增框 -->
        <div>
          <el-dialog
            ref="addCarData"
            title="请输入新增车辆保险信息"
            :visible.sync="addFormVisible"
          >
            <!--  在el-dialog中进行嵌套el-form实现弹出表格的效果  -->
            <el-form
              :model="addCar"
              :inline="true"
              ref="addCar"
              label-width="120"
            >
              <el-form-item label="车牌号码" style="width: 100%">
                <el-select v-model="addCar.carId" placeholder="请选择车牌号">
                  <el-option
                    v-for="item in carData"
                    :key="item.id"
                    :label="item.carNumber"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="保险公司" style="width: 100%">
                <el-input
                  v-model="addCar.insuranceCom"
                  auto-complete="off"
                ></el-input>
              </el-form-item>
              <el-form-item label="商业险保单号" style="width: 100%">
                <el-input
                  v-model="addCar.insuranceNum"
                  auto-complete="off"
                ></el-input>
              </el-form-item>
              <el-form-item label="商业险开始日期" style="width: 40%">
                <el-date-picker
                  v-model="addCar.insuranceStartDate"
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="选择日期"
                >
                </el-date-picker>
              </el-form-item>
              <el-form-item label="商业险结束日期" style="width: 40%">
                <el-date-picker
                  v-model="addCar.insuranceEndDate"
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="选择日期"
                >
                </el-date-picker>
              </el-form-item>
              <el-form-item label="交强险保单号" style="width: 100%">
                <el-input
                  v-model="addCar.trafficInsuranceNum"
                  auto-complete="off"
                ></el-input>
              </el-form-item>
              <el-form-item label="交强险开始日期 " style="width: 40%">
                <el-date-picker
                  v-model="addCar.trafficInsuranceStartDate"
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="选择日期"
                >
                </el-date-picker>
              </el-form-item>
              <el-form-item label="交强险结束日期" style="width: 40%">
                <el-date-picker
                  v-model="addCar.trafficInsuranceEndDate"
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="选择日期"
                >
                </el-date-picker>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="addFormVisible = false">取 消</el-button>
              <!-- 设置触发更新的方法  -->
              <el-button type="primary" @click="addCarData()">确 定</el-button>
            </div>
          </el-dialog>
        </div>
        <!-- 分页 -->
        <div class="block" style="float: right">
          <el-pagination
            @size-change="SizeChange"
            @current-change="CurrentChange"
            :page-sizes="[4, 2, 3, 10]"
            :page-size="pagesizes"
            layout="total, prev, pager, next,sizes"
            :total="carData.length"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </el-card>
</template>

<script>
import InsuranceDate from '../../api/carInsurance.js';
export default {
  data() {
    return {
      input: {},
      count: 0,
      carMsg: 0,
      carData: [],
      carData1: [
        {
          id: 1,
          carNumber: '11',
          insuranceCom: '泸州老窖',
          insuranceNum: 2333,
          insuranceStartDate: '2005-03-03',
          insuranceEndDate: '2008-09-09',
          trafficInsuranceNum: 111111,
          trafficInsuranceStartDate: '2005-03-09',
          trafficInsuranceEndDate: '2005-03-53'
        },
        {
          id: 2,
          carNumber: '22',
          insuranceCom: '泸州老窖',
          insuranceNum: 2333,
          insuranceStartDate: '2005-03-03',
          insuranceEndDate: '2008-09-09',
          trafficInsuranceNum: 111111,
          trafficInsuranceStartDate: '2005-03-09',
          trafficInsuranceEndDate: '2005-03-53'
        },
        {
          id: 3,
          carNumber: '333',
          insuranceCom: '泸州老窖',
          insuranceNum: 2333,
          insuranceStartDate: '2005-03-03',
          insuranceEndDate: '2008-09-09',
          trafficInsuranceNum: 111111,
          trafficInsuranceStartDate: '2005-03-09',
          trafficInsuranceEndDate: '2005-03-53'
        }
      ],
      carNumberstyle: [],
      tableDataAmount: [],
      currentPage: 1,
      pagesizes: 10,
      dialogFormVisible: false,
      addFormVisible: false,
      form: {},
      addCar: {
        carId: '',
        carNumber: '',
        insuranceCom: '',
        insuranceNum: '',
        insuranceStartDate: '',
        insuranceEndDate: '',
        trafficInsuranceNum: '',
        trafficInsuranceStartDate: '',
        trafficInsuranceEndDate: ''
      }
    };
  },
  created() {
    // axios({
    //   url: "http://172.16.6.152/car/getAllCarInsurance",
    //   method: "GET",
    // })
    InsuranceDate.getCarinsuranceList()
      .then(res => {
        console.log(res);
        this.carData = res.data.data.carInsuranceList;
        this.carNumberstyle = res.data.data.carInsuranceList;
      })
      .catch(err => {
        console.log(err);
      });
  },
  computed: {
    tableDate() {
      return this.carData.slice(
        (this.currentPage - 1) * this.pagesizes,
        this.currentPage * this.pagesizes
      );
    }
  },
  methods: {
    //分頁
    CurrentChange(currentPage) {
      this.currentPage = currentPage;
    },
    SizeChange(pagesizes) {
      this.pagesizes = pagesizes;
    },
    //计数
    handleSelectionChange(val) {
      console.log(val.length);
      this.count = val.length;
    },
    //  新增
    addCarData() {
      console.log(this.addCar);
      // 网络请求获取数据axios
      if (
        this.addCar.insuranceEndDate <= this.addCar.insuranceStartDate &&
        this.addCar.trafficInsuranceEndDate <=
          this.addCar.trafficInsuranceStartDate
      ) {
        alert('商业险或者交强险结束时间必须大于开始时间');
      } else {
        // this.axios({
        //   url: "http://172.16.6.152/car/addCarInsuranceInfo",
        //   method: "POST",
        //   data: {
        //     carId: this.addCar.carId,
        //     insuranceCom: this.addCar.insuranceCom,
        //     insuranceNum: this.addCar.insuranceNum,
        //     insuranceStartDate: this.addCar.insuranceStartDate,
        //     insuranceEndDate: this.addCar.insuranceEndDate,
        //     trafficInsuranceNum: this.addCar.trafficInsuranceNum,
        //     trafficInsuranceStartDate: this.addCar.insuranceStartDate,
        //     trafficInsuranceEndDate: this.addCar.insuranceEndDate,
        //   },
        // })
        InsuranceDate.AddCarData(this.addCar)
          .then(res => {
            //请求成功，方法回调
            console.log(res);
          })
          .catch(err => {
            //请求失败
            console.log(err);
          });
        this.addFormVisible = false;
        window.location.reload();
      }
    },
    //查询清空
    clear() {
      this.input = {};
      window.location.reload();
    },
    // 搜索
    search() {
      // 网络请求获取数据axios
      // this.axios
      //   .get("http://172.16.6.152/car/getCarInsuranceInfoById", {
      //     params: {
      //       id: this.input.carId,
      //     },
      //   })
      InsuranceDate.SearchCarinsuranceData(this.input.carId)
        .then(res => {
          //请求成功，方法回调
          console.log(res.data.data);
          this.carData = res.data.data.carInsurance;
          console.log(this.carData);
        })
        .catch(err => {
          //请求失败
          console.log(err);
        });
    },
    //删除
    del(delId) {
      console.log(delId);
      if (confirm('确定要删除吗') == true) {
        //网络请求获取数据axios
        // this.axios
        //   .get("http://172.16.6.152/car/delCarInsuranceInfo", {
        //     params: {
        //       id: delId,
        //     },
        //   })
        InsuranceDate.DelCarinsuranceData(delId)
          .then(res => {
            //请求成功，方法回调
            console.log(res.data);
          })
          .catch(function(err) {
            //请求失败
            console.log('失败了' + err);
          });
        window.location.reload();
      }
    },
    //修改
    Edit(item, id) {
      console.log(item, id);
      this.form = item;
      this.dialogFormVisible = true;
    },
    changeupdate() {
      console.log(this.form);
      if (
        this.form.insuranceEndDate <= this.form.insuranceStartDate &&
        this.form.trafficInsuranceEndDate <= this.form.trafficInsuranceStartDate
      ) {
        alert('商业险或者交强险结束时间必须大于开始时间');
      } else {
        // this.axios
        //   .post("http://172.16.6.152/car/editCarInsuranceInfo", {
        //     id: this.form.id,
        //     insuranceCom: this.form.insuranceCom,
        //     insuranceNum: this.form.insuranceNum,
        //     insuranceStartDate: this.form.insuranceStartDate,
        //     insuranceEndDate: this.form.insuranceEndDate,
        //     trafficInsuranceNum: this.form.trafficInsuranceNum,
        //     trafficInsuranceStartDate: this.form.trafficInsuranceStartDate,
        //     trafficInsuranceEndDate: this.form.trafficInsuranceEndDate,
        //   })
        InsuranceDate.EditCarinsuranceData(this.form)
          .then(function(res) {
            //请求成功，方法回调
            console.log(res.data);
          })
          .catch(function(err) {
            //请求失败
            console.log(err);
          });
        this.dialogFormVisible = false;
        // window.location.reload();
      }
    },
    //清空
    clearBoth() {
      // 清除选中状态
      this.$refs.multipleTable.clearSelection();
    }
  }
};
</script>
<style scoped>
body {
  text-align: center;
}
</style>
